<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>

	<head>
		<meta charset="utf-8">
		<title>杰利联合</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492676217" media="all">
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
		<link href="${ctxStatic}/jiu/css/common.css?v=1492676217" rel="stylesheet" type="text/css">
		<style>
				.hearder{
				height: 50px;
				background-color: #30B0F3;
				width: 100%;
				text-align: center;
				color: white;
				font-size: 20px;
                line-height:50px;
                position: fixed;
			    top: 0;
			    z-index: 1;
			}
			.shang {
				display: flex;
				display: -webkit-flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 60px;
				margin-left: 5px;
				margin-right: 5px;
				border-bottom: 1px #DFDFDF solid;
				padding: 10px;
			}
			
			.name {
				font-size: 16px;
			}
			
			.ping1 {
				font-size: 16px;
				padding: 5px;
				margin-top: 15px;
				color: #666666;
				margin-left: 5px;
			}
			
			.clearfix::after {
				display: block;
				content: '';
				height: 0;
				overflow: hidden;
				clear: both;
			}
			/*星星样式*/
			
			.content {
				max-width: 640px;
				margin: 0 auto;
				padding-top: 20px;
			}
			
			.title {
				font-size: 14px;
				background: #dfdfdf;
				padding: 10px;
				margin-bottom: 10px;
			}
			
			.block {
				/* width: 100%; */
				margin: 0 0 20px 0;
				/* padding-top: 10px; */
				line-height: 29px;
				margin-left: 10px;
				margin-right: 10px;
				padding: 5px;
				border-radius: 3px;
			}
			
			.block .star_score {
				float: left;
			}
			
			.star_list {
				height: 21px;
				margin: 50px;
				line-height: 21px;
			}
			
			.block p,
			.block .attitude {
				padding-left: 20px;
				line-height: 21px;
				display: inline-block;
			}
			
			.block p span {
				color: #C00;
				font-size: 16px;
				font-family: Georgia, "Times New Roman", Times, serif;
			}
			
			.star_score {
				width: 175px;
				height: 21px;
				position: relative;
			}
			
			.star_score a {
				height: 30px;
				display: block;
				text-indent: -999em;
				position: absolute;
				left: 0;
			}
			
			#starttwo .star_score {
				background: url(${ctxStatic}/jiu/img/starky.png);
			}
			
			#starttwo .star_score a:hover {
				background: url(${ctxStatic}/jiu/img/starsy.png);
				left: 0;
			}
			
			#starttwo .star_score a.clibg {
				background: url(${ctxStatic}/jiu/img/starsy.png);
				left: 0;
			}
			/*星星样式*/
			
			.show_number {
				padding-top: 15px;
			}
			
			.show_number li {
				width: 240px;
				border: 1px solid #ccc;
				padding: 10px;
				margin-right: 5px;
				margin-bottom: 20px;
			}
			
		  .atar_Show {
				background: url(${ctxStatic}/jiu/img/stark3.png);
				width: 180px;
				height: 29px;			  
			}
			
			.atar_Show p {
				background: url(${ctxStatic}/jiu/img/stars3.png);
				left: 0;
				height: 29px;
				width: 134px;
			}	
			.show_number li span {
				display: inline-block;
				line-height: 21px;
			}
			
			.pingjia {
				border: 1px solid #e4e3e3;
				width: 100%;
				padding: 5px 4px;
				line-height: 30px;
				border-radius: 2px;
			}
								
			.pingjia_btn {
				width: 100%;
				display: block;
				padding: 10px 0;
				background: #3399ff;
				border: 0;
				font-size: 16px;
				font-family: "Microsoft YaHei";
				color: white;
				text-align: center;
				border-radius: 5px;
			}
			
			select.ui-choose {
				display: none;
			}
			
			ul.ui-choose {
				box-sizing: border-box;
				display: inline-block;
				border: 1px solid transparent;				
				border-right: none;
				border-bottom: none;
				font-size: 14px;
				margin: 0;
				padding: 0;
				list-style: none;
				vertical-align: middle;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			ul.ui-choose:after {
				content: "";
				display: table;
				clear: both;
			}			
			ul.ui-choose>li {
				border-radius: 3px;
				box-sizing: border-box;
				border: 1px solid #ccc;
				float: left;
				height: 30px;
				line-height: 30px;
				margin: 8px 5px 5px 10px;
				padding: 0 8px;
				cursor: pointer;
				position: relative;
				z-index: 1;
				min-width: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body style="background-color: white;">
		<header  class="hearder">
			<a href="javascript:window.history.go(-1)">
				<img src="${ctxStatic}/jiu/img/fanhui.png" style="height: 20px;color: white;top:15px;position: absolute;left: 10px;"/></a>
			用户评价
	    </header>
			<div class="shang">
			<div style="">
				<img src="${store.headimgurl}" style="width:60px;height:60px;border-radius: 50px;">
			</div>
			<div style="margin-left: 10px;line-height: 25px;">
				<p class="name">${store.name}</p>				
			</div>
		</div>
		
		
		<c:choose>
		    <c:when test="${starNum eq 0}">
		     	<div class="empty_container">
					<p>暂无评价</p>
				</div>
		    </c:when>
		    <c:otherwise>
		     	<div style="margin-top: 60px;display: inherit;">
					<p class="ping1">总体评价：</p>			
					<div class="show_number clearfix">
						<div class="atar_Show">
							<p tip="${starNum}"></p>
						</div>
					</div>
				</div>
				<div style="margin-top: 30px;">
					<ul class="ui-choose" multiple="multiple" id="uc_03" style="margin-bottom: 80px;">
						<c:forEach items="${jiuEvaluateWordsList}" var="jiuEvaluateWords">
							<li>${jiuEvaluateWords.word} &nbsp;${jiuEvaluateWords.wordNum}</li>
						</c:forEach>
					</ul>
				</div>
		    </c:otherwise>
		</c:choose>
		
		<script type="text/javascript" src="js/startScore.js"></script>
	
		<script>
			//显示分数
			$(".show_number div p").each(function(index, element) {
				var num = $(this).attr("tip");
				var www = num * 2 * 18; //
				$(this).css("width", www);
			});
		</script>
	</body>
</html>